<template>
  <div class="BusNeighborsPublish wd1200">
    <v-bread />
    <div class="select-box">
      <div class="box">
        <el-input v-model="title" placeholder="请输入招聘职位" />
      </div>
      <el-button type="primary" class="search-btn" @click="toDetails">查询</el-button>
    </div>
    <div class="wd1200 table-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :highlight-selection-row="true"
        :highlight-current-row="true"
        :stripe="true"
        :header-cell-style="{background:'#E5F2FF',color:'#000000',fontSize:'12px',fontWeight:'500'}"
        :cell-style="{fontSize:'12px',color:'#000000',fontWeight:'500'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />
        <el-table-column
          prop="title"
          label="岗位名称"
          align="left"
          min-width="10%"
        />
        <el-table-column
          prop="employerNumber"
          align="left"
          label="岗位数量"
          min-width="10%"
          class-name="num"
          label-class-name="header-num"
        />
        <el-table-column
          align="right"
          min-width="10%"
          prop="education"
          label="学历要求"
        />
      </el-table>
    </div>
    <v-pagination :total="total" :page-size="pageSize" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
  </div>
</template>
<script>
import vBread from '../../../components/busNeighbors/bread'
import vPagination from '../../../components/busNeighbors/pagination'
import { trim } from 'lodash'
export default {
  name: 'BusNeighborsPublish',
  components: { vBread, vPagination },
  data() {
    return {
      title: '',
      tableData: [],
      params: {},
      apiCollection: {},
      api: '',
      total: 0,
      pageSize: 0,
      companyName: ''
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.api = JSON.parse(this.$route.query.data).api
    this.params = JSON.parse(this.$route.query.data).params
    this.pageSize = JSON.parse(this.$route.query.data).params.pageSize
    this.apiCollection = require('@/api/busNeighbors')
    this.toDetails()
  },
  methods: {
    async toDetails() {
      // this.params.title = this.title
      if (this.title) this.params.title = this.title
      this.params.title = trim(this.params.title, '%')
      if (this.title) {
        this.params.title = `%${this.params.title || ''}%`
      } else {
        this.params.title = ''
      }
      this.params = this.removeProperty(this.params)
      const res = await this.apiCollection[this.api](this.params)
      this.tableData = res.data && res.data.content || []
      this.total = res.data && res.data.total || 0
    },
    handleSizeChange(val) {
      this.$set(this.params, 'pageSize', val)
      this.toDetails()
    },
    handleCurrentChange(val) {
      this.$set(this.params, 'pageNumber', val)
      this.toDetails()
    },
    removeProperty(obj) {
      Object.keys(obj).forEach(item => {
        if (obj[item] === '' || obj[item] === undefined || obj[item] === null || obj[item] === 'null') delete obj[item]
      })
      return obj
    }
  }
}
</script>
<style lang="scss" scoped>
.BusNeighborsPublish{

  .select-box {
    display: flex;
    padding: 30px 0 0;

    .box {
      flex: 1;
      margin-right: 20px;
      width: 386px;

      .el-select {
        width: 100%;
      }
    }

    .box:last-child {
      margin-right: 0;
    }
    .search-btn {
      width: 104px;
      background: linear-gradient( 270deg, #649CED 0%, #0071DF 100%);
      border-radius: 6px 6px 6px 6px;
      line-height: 36px;
      height: 36px;
      padding: 0;
    }
  }
  .table-box{
    margin-top: 30px;
  }
  .pagination{
    margin-top: 40px;
    text-align: end;
  }

  ::v-deep .el-pagination li{
    background: transparent;
    border: 1px solid #CCCCCC;
    color: #999999;
    font-weight: 500;
    border-radius: 2px 2px 2px 2px;
  }
  ::v-deep .el-pagination li.active{
    background: #217FE4;
  }
  ::v-deep .el-pagination .btn-prev{
    background: transparent;
    border: 1px solid #CCCCCC;
    color: #999999;
  }
  ::v-deep .el-pagination .btn-next{
    background: transparent;
    border: 1px solid #CCCCCC;
    color: #999999;
  }
  ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background: #F4F8FC;
  }
  ::v-deep .num{
    color: #FF8C1A !important;
  }
  ::v-deep .header-num{
    color: #000000 !important;
  }
}
</style>
